<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>换一换</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>

	<body>
		<div class="container">
		<a id="btn">换一换 更多</a>
		<hr>
		<div id="list"></div>
		</div>
		<script type="text/javascript">
			//初始值
			var page = 1;
			//给换一换加点击事件
			document.querySelector("#btn").addEventListener("click", function() {
				//让page+1
				page++;
				//解决追加问题
				document.querySelector("#list").innerHTML = "";
				//执行AJAX方法
				loadXMLDoc();
			})

			//获取 json 数据用的 ajax 方法
			function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//IE7+,FifeFox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					//IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = xmlhttp.responseText;
						//把获取到的数据，转成数组对象格式的，方便js操作
						json = JSON.parse(json);
						for(let i = 0; i < json.shop.length; i++) {
							console.log(json.shop[i])
							//创建节点
							var img = document.createElement('img');
							img.src = json.shop[i].pic;
							//创建h3节点
							var span = document.createElement('span');
							span.innerHTML = json.shop[i].title;
							//创建p节点
							var p= document.createElement('P');
							p.innerHTML = json.shop[i].price;
							//创建a节点
							var a= document.createElement('a');
							a.innerHTML = json.shop[i].jiage;
							//创建div节点
							var div = document.createElement('div');
							//进度条
							//向div标签追加3个子标签
							div.appendChild(img)
							div.appendChild(span)
							div.appendChild(p)
							div.appendChild(a)
							

							console.log(div);

							//把3个div标签追加到最大的 div#list 标签
							document.querySelector('#list').appendChild(div)

						}
					}
				}
				if(page>3){
					page=3
				}
				xmlhttp.open("GET", page + '.json', true);
				xmlhttp.send();    
			}
			//先执行一遍ajax方法
			loadXMLDoc();
		</script>
	</body>

</html>